<template>
  <div class="home">
    <MapView
      :viewer-id="viewerId"
      @onload="onMapLoad"
      @beforeDestroy="beforeMapDestroy"
    />

    <div class="header">
      <span class="app-title">成都未来科技城</span>
    </div>

    <div class="navigation">
      <div class="navigation-item">
        <span
          class="navigation-item-title"
          @click="handleNavigationItemClick(0)"
          >城市规划</span
        >

        <div
          v-if="navigationChildrenShowIndex === 0"
          class="navigation-children"
        >
          <div
            class="navigation-children-item"
            @click="handleNavigationChildItemClick(0, 0)"
          >
            <span class="navigation-children-item-title"
              >沙盘驾驶舱</span
            >
          </div>

          <img class="divider" :src="NavigationDivider" />

          <div
            class="navigation-children-item"
            @click="handleNavigationChildItemClick(0, 1)"
          >
            <span class="navigation-children-item-title"
              >多规合一</span
            >
          </div>

          <img class="divider" :src="NavigationDivider" />

          <div
            class="navigation-children-item"
            @click="handleNavigationChildItemClick(0, 2)"
          >
            <span class="navigation-children-item-title"
              >方案对比</span
            >
          </div>
        </div>
      </div>

      <div class="navigation-item">
        <span
          class="navigation-item-title"
          @click="handleNavigationItemClick(1)"
          >招商引资</span
        >

        <div
          v-if="navigationChildrenShowIndex === 1"
          class="navigation-children"
        >
          <div
            class="navigation-children-item"
            @click="handleNavigationChildItemClick(1, 0)"
          >
            <span class="navigation-children-item-title"
              >智慧招商</span
            >
          </div>

          <img class="divider" :src="NavigationDivider" />

          <div
            class="navigation-children-item"
            @click="handleNavigationChildItemClick(1, 1)"
          >
            <span class="navigation-children-item-title"
              >产业发展</span
            >
          </div>
        </div>
      </div>

      <div class="navigation-item">
        <span
          class="navigation-item-title"
          @click="handleNavigationItemClick(2)"
          >项目建设</span
        >

        <div
          v-if="navigationChildrenShowIndex === 2"
          class="navigation-children"
        >
          <div
            class="navigation-children-item"
            @click="handleNavigationChildItemClick(2, 0)"
          >
            <span class="navigation-children-item-title"
              >智慧工地</span
            >
          </div>
        </div>
      </div>

      <div class="navigation-item">
        <span
          class="navigation-item-title"
          @click="handleNavigationItemClick(3)"
          >土地管理</span
        >
      </div>

      <div class="navigation-item">
        <span
          class="navigation-item-title"
          @click="handleNavigationItemClick(4)"
          >地下空间</span
        >
      </div>
    </div>

    <PanoramaPanel />

    <CityPlanPanel />

    <ProjectPanel />
  </div>
</template>

<script>
import NavigationDivider from '@/assets/img/home-header-navigation-divider.png'
import MapView from '@/components/mapView'
import PanoramaPanel from './components/panorama-panel'
import CityPlanPanel from './components/city-plan-panel'
import ProjectPanel from './components/project-panel'
import { getAction } from '@/utils/helper'
import { homePosition } from '@/utils/constant'
import { topicDefaultList } from '@/api/tree'
import { retrieveDataServiceById } from '@/api/multiple-dataservice'
import cacheUtil from '@/utils/cache'
import {
  jiashicang,
  duoguiheyi,
  fanganduibi,
  zhihuizhaoshang,
  chanyefazhan,
  zhihuigongdi
} from '@/api/config'

let _layerManager

export default {
  name: 'Home',
  components: {
    MapView,
    PanoramaPanel,
    CityPlanPanel,
    ProjectPanel
  },
  data() {
    return {
      NavigationDivider,
      viewerId: 'homeMap',
      navigationChildrenShowIndex: -1,
      cameraConfig: null
    }
  },
  methods: {
    async onMapLoad({ id, viewer }) {
      const { layerManager } = await getAction(id)
      _layerManager = layerManager

      const cacheItem = cacheUtil.getItem('camera')
      if (cacheItem) {
        try {
          const config = JSON.parse(cacheItem)
          if (config.cameraHeight && config.centerPoint) {
            this.cameraConfig = config
          } else {
            this.cameraConfig = null
          }
        } catch (e) {
          console.error(e)
          this.cameraConfig = null
        }
      } else {
        this.cameraConfig = null
      }

      viewer.camera.flyTo({
        destination: this.cameraConfig
          ? Cesium.Cartesian3.fromDegrees(
              Number(
                this.cameraConfig.centerPoint.split(',')[0]
              ),
              Number(
                this.cameraConfig.centerPoint.split(',')[1]
              ),
              Number(this.cameraConfig.cameraHeight)
            )
          : homePosition.destination,
        orientation: homePosition.orientation
      })

      this.loadLayerConfig()
    },
    beforeMapDestroy({ id }) {
      console.log(`home map:[${id}] destroy`)
    },
    // 读取地图加载配置
    loadLayerConfig() {
      topicDefaultList('weilailantu-konggui').then(
        async (res) => {
          if (res.success && res.data) {
            for await (const item of res.data.reverse()) {
              item.dataList = await this.getDataList(
                item.pkid
              )
              if (!item.dataList.length) {
                return
              }
              item.serviceUrl = item.dataList[0].serviceUrl
              item.signService =
                item.dataList[0].signService
              item.currentDataIndex = 0
              // this.$bus.$emit('showDataList', item)
              await _layerManager.addAsync(item)
            }
          }
        }
      )
    },
    async getDataList(pkid) {
      const list = []
      await retrieveDataServiceById({
        pageIndex: 1,
        pageSize: 999,
        serviceId: pkid
      }).then((res) => {
        if (res.success) {
          if (res.data && res.data.length) {
            // 将配置的数据列表赋给原始数据
            list.push(...res.data)
          } else {
            this.$message.warning('该服务未配置数据')
          }
        } else {
          this.$message.error(
            res.message || '服务数据查询失败'
          )
        }
      })
      return list
    },
    handleNavigationItemClick(index) {
      if (index === this.navigationChildrenShowIndex) {
        this.navigationChildrenShowIndex = -1
      } else {
        this.navigationChildrenShowIndex = index
      }
      // if (index === 3) {
      //   // console.log('打开土地管理')
      //   this.navigateToApp('https://www.baidu.com')
      // } else if (index === 4) {
      //   // console.log('打开地下空间')
      //   this.navigateToApp('https://www.baidu.com')
      // }
    },
    handleNavigationChildItemClick(
      parentIndex,
      childIndex
    ) {
      if (parentIndex === 0) {
        if (childIndex === 0) {
          // console.log('打开沙盘驾驶舱')
          this.navigateToApp(jiashicang, true)
        } else if (childIndex === 1) {
          // console.log('打开多规合一')
          this.navigateToApp(duoguiheyi, true)
        } else if (childIndex === 2) {
          // console.log('打开方案对比')
          this.navigateToApp(fanganduibi, true)
        }
      } else if (parentIndex === 1) {
        if (childIndex === 0) {
          // console.log('打开智慧招商')
          this.navigateToApp(zhihuizhaoshang, true)
        } else if (childIndex === 1) {
          // console.log('打开产业发展')
          this.navigateToApp(chanyefazhan, true)
        }
      } else if (parentIndex === 2) {
        if (childIndex === 0) {
          // console.log('打开智慧工地')
          this.navigateToApp(zhihuigongdi, true)
        }
      }
    },
    navigateToApp(url, collapseNavigationChildren) {
      if (collapseNavigationChildren) {
        this.navigationChildrenShowIndex = -1
      }
      if (url) {
        window.open(url, '_blank')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 85px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('~@/assets/img/background-home-header.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .app-title {
      line-height: 46px;
      font-size: 46px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #ffffff;
      text-shadow: 0 2px 2px rgba(230, 230, 230, 0.46);

      background: linear-gradient(
        0deg,
        #7f8286 0%,
        #ffffff 13.134765625%,
        #b1b7be 54.9072265625%,
        #ffffff 99.4873046875%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .navigation {
    position: fixed;
    top: calc(85px + 25px);
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .navigation-item + .navigation-item {
      margin-left: 30px;
    }

    &-item {
      position: relative;
      width: 150px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: url('~@/assets/img/background-home-navigation.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      user-select: none;

      &:hover {
        background-image: url('~@/assets/img/background-home-navigation-active.png');

        .navigation-item-title {
          text-shadow: 0 1px 1px rgba(0, 255, 255, 0.85);
        }
      }

      &-title {
        font-size: 20px;
        line-height: 20px;
        font-family: PingFang SC;
        //margin-bottom: 6px;
        color: #fff;
        text-shadow: 0 1px 1px #eeeeee;
        background: linear-gradient(
          180deg,
          #ffffff 0%,
          #a4bbdd 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 800;
        cursor: pointer;
      }

      .navigation-children {
        position: absolute;
        top: calc(44px + 10px);
        left: 10px;
        width: 130px;
        display: flex;
        flex-direction: column;
        background-color: rgba(10, 66, 84, 0.8);
        background-clip: padding-box;
        border: 1px solid transparent;
        border-radius: 5px;

        &:before {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: -1;
          margin: -1px;
          border-radius: inherit;
          background: linear-gradient(
            to top,
            rgba(255, 255, 255, 0.5),
            rgba(255, 255, 255, 0.8)
          );
        }

        &:after {
          content: '';
          display: block;
          position: absolute;
          width: 0;
          height: 0;
          border: 10px solid transparent;
          //border-bottom-color: #0b566fcc;
          border-bottom-color: rgba(255, 255, 255, 0.8);
          left: 53px;
          top: -20px;
        }

        .divider {
          width: 100%;
          height: 2px;
        }

        &-item {
          width: 100%;
          height: 37px;
          padding: 0 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: transparent;
          cursor: pointer;

          &:hover {
            .navigation-children-item-title {
              text-shadow: 0 1px 1px rgba(0, 255, 255, 0.85);
            }
          }

          &-title {
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 800;
            color: #d2e6f0;
            text-shadow: 0 1px 1px #eeeeee;
            background: linear-gradient(
              180deg,
              #ffffff 0%,
              #a4bbdd 100%
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }
    }
  }

  .panorama-panel {
    position: fixed;
    left: 60px;
    top: 100px;
    bottom: 50px;
    width: 500px;
    padding: 20px 0 20px 20px;
  }

  .city-plan-panel {
    position: fixed;
    left: calc(60px + 500px + 50px);
    top: 100px;
    bottom: 50px;
    width: 500px;
    padding: 20px 0 20px 20px;
  }

  .project-panel {
    position: fixed;
    right: 60px;
    top: 100px;
    bottom: 50px;
  }
}
</style>
